<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>刘艾青--算法测试</title>

		<style type="text/css">
			#main {
				width: 800px;
				height: 600px;
				background-color: chartreuse;
				background-image: url(img/背景.png);
				margin: 0 auto;
			}
			
			.top {
				/*border: 1px solid red;*/
				height: 465px;
				position: relative;
				overflow: hidden;
			}
			
			.bottom {
				/*border: 1px solid blue;*/
				position: relative;
				height: 135px;
			}
			
			.pg {
				width: 63px;
				height: 71px;
				background-image: url(img/苹果.png);
				color: white;
				font-size: 40px;
				font-weight: bold;
				text-align: center;
				line-height: 71px;
				position: absolute;
			}
			
			td {
				position: relative;
			}
			
			.kaishi {
				width: 50px;
				height: 50px;
				position: absolute;
				right: 54px;
				top: 60px;
				border-radius: 50%;
				outline: none;
				/*轮廓*/
				background-color: transparent;
				cursor: pointer;
			}
			
			.zanting {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 117px;
				top: 48px;
				border-radius: 50%;
				outline: none;
				/*轮廓*/
				background-color: transparent;
				cursor: pointer;
			}
			
			.context {
				font-size: 25px;
				font-weight: bold;
			}
			
			span {
				color: white;
			}
			
			.kuang {
				background-image: url(img/篮子.png);
				width: 180px;
				height: 135px;
				position: relative;
				left: 50px;
			}
			/*#ip{
				width: 100%;
				height: 400px;
			}*/
		</style>

	</head>

	<body>

		<div id="main">

			<div class="top">

				 </div>

			
			<div class="bottom">

				
				<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

					
					<tr>

						
						<td width="300">

							 <button class="kaishi" onclick="kaishi()"></button> + <button class="zanting" onclick="zanting()"></button>  </td>

						
						<td width="260">
							<div class="context">正确率: <span id="zql">100%</span></div>
							<div class="context">时间: <span id="time">00:00:00</span></div>
							<div class="context">速度: <span id="sudu">0个/分钟</span></div>
						</td>
						<td width="240">
							<div class="kuang">
								<img src="img/苹果2.png" />  </div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<input type="text" id="ip" value=" " /><font>点击文本框输入苹果代号。（目前仅支持开始暂停功能）</font>
		<script type="text/javascript">
			var ip = document.getElementById("ip");
			
			ip.onkeydown = function(){
				ip.onkeyup = function(){
					console.log(1);
					ip.value =  " ";
				}
			}
			
			var pg1 = document.querySelector("#pg1");

			var moveid = 0;

			var createid = 0;

			var posuiSum = 0; //破碎的苹果数量

			var pgSum = 0; //下落的苹果总数

			var zqsum = 0; //正确的苹果数量

			var time = 0; //统计秒数

			var timeid = 0;

			//点击开始按钮执行的函数

			function kaishi() {

				if(moveid == 0) {

					//打开苹果移动的开关

					moveid = setInterval(function() {

						var divtop = document.querySelector(".top");

						//获取top这个div中的所有div苹果

						var divlist = document.querySelectorAll(".top div");

						for(var i = 0; i < divlist.length; i++) {
							
							var sudu = divlist[i].getAttribute("data-sudu");
							
							var pgtop = parseInt(divlist[i].style.top) + parseFloat(sudu);
							
							divlist[i].style.top = pgtop + "px";
							//苹果掉地上了

							if(pgtop > 383){
								
								divlist[i].style.backgroundImage = "url(img/破裂苹果.png)";
								
								divlist[i].innerHTML = "";
								
							}
							
							if(pgtop > 395) {

								posuiSum++;

								divtop.removeChild(divlist[i]);

								document.querySelector("#zql").innerHTML = parseInt((1 - posuiSum / pgSum) * 100) + "%";

							}

						}

					}, 33);

					createid = setInterval(function() {

						//添加一个苹果

						var divtop = document.querySelector(".top");

						//创建一个苹果div

						var div = document.createElement("div");

						div.className = "pg";

						//随即生成left

						var l = parseInt(Math.random() * 730);

						div.style.left = l + "px";

						div.style.top = "0px";

						div.setAttribute("data-sudu", Math.random() * 3 + 1);

						//随即生成字母的ASCII值

						var ch = parseInt(Math.random() * 26) + 65;

						div.innerHTML = "&#" + ch + ";";

						//保存字母的ascii值到标签的自定义属性data-code

						div.setAttribute("data-code", ch);

						//把苹果div添加到divtop

						divtop.appendChild(div);

						pgSum++;

					}, 700);

					timeid = setInterval(function() {

						time++;

						var ss = time % 60;

						ss = ss < 10 ? "0" + ss : ss;

						var mm = (time - time % 60) / 60;

						mm = mm < 10 ? "0" + mm : mm;

						var hh = (time - time % 3600) / 3600;

						hh = hh < 10 ? "0" + hh : hh;

						
						document.querySelector("#time").innerHTML = hh + ":" + mm + ":" + ss;

					}, 1000);

				}

			}

			function zanting() {

				clearInterval(moveid);

				clearInterval(createid);

				clearInterval(timeid);

				moveid = 0;

			}

			window.onkeydown = function(event) {

				//console.log(event.keyCode);

				var divtop = document.querySelector(".top");

				//拿到div内部所有的苹果对象

				var pglist = document.querySelectorAll(".top div");

				for(var i = 0; i < pglist.length; i++) {

					//获取苹果自定义属性data-code

					var code = pglist[i].getAttribute("data-code");

					if(code == event.keyCode) {

						zqsum++;

						//找到苹果删除

						divtop.removeChild(pglist[i]);

						document.querySelector("#zql").innerHTML = parseInt((1 - posuiSum / pgSum) * 100) + "%";

						var sd = parseInt(zqsum / time * 60);

						document.querySelector("#sudu").innerHTML = sd + "个/分钟";

						break;

					}

				}

			};
		</script>

	</body>

</html>